<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
/* reset */

html, body, div, p, ul, li, dl, dt, dd, em, i, span, a, img, input, h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0
}

a, img, input {
    border: none;
}

body {
    font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    text-decoration: none;
}

ul, li {
    list-style: none
}

a, img {
    -webkit-touch-callout: none;
    /* 禁止长按链接与图片弹出菜单 */
}

html, body {
    -webkit-user-select: none;
    /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

body {
    opacity: 0;
    transition: 1s all;
    -webkit-transition: 1s all;
    background-color: #0c0c24;
}



#cen{
	position: absolute;
	width:4px;
	height: 4px;
	left:50%;
	top:50vh;
}
#svgGroup{
    position: absolute;

    width: 572px;
    height: 484px;

}
svg * {
    fill: none;
}
#svgGroup .svg-wp{
    position: absolute;
    opacity:1;

}
#svgGroup svg{
    /*opacity:0;*/
    /*width: 100%;*/
    stroke:#080;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    position: absolute;
    opacity: 0.2;
}

#s0{
    top:327px;left:200px;width: 158px;height: 108px;
}
#s1{
    top:166px;left:236px;width: 88px;height: 223px;
}
#s2{
    top:160px;left:97px;width: 156px;height: 181px;
}
#s3{
    top:281px;left:164px;width: 82px;height: 147px;
}
#s4{
    top:301px;left:75px;width:125px;height: 135px;
}
#s5{
    top:34px;left:143px;width:120px;height: 173px;
}
#s6{
    top:129px;left:69px;width:86px;height: 180px;
}
#s7{
    top:47px;left:111px;width:114px;height: 107px;
}
#s8{
    top:152px;left:268px;width:130px;height: 130px;
}
#s9{
    top:275px;left:279px;width:102px;height: 113px;
}
#s10{
    top:122px;left:279px;width:181px;height: 216px;
}
#s11{
    top:317px;left:343px;width:159px;height: 130px;
}
#s12{
    top:94px;left:399px;width:118px;height: 231px;
}
#s13{
    top:11px;left:302px;width:160px;height: 110px;
}
#s14{
    top:410px;left:153px;width:250px;height: 71px;
}
#s15{
    top:34px;left:235px;width:121px;height:131px;
}
#s16{
    top:10px;left:103px;width:208px;height:88px;
}
#s17{
    top:92px;left:48px;width:81px;height:195px;
}
#s18{
    top:279px;left:50px;width:112px;height:154px;
}
	
#imgResult{
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 100%;
}
#imgResult img{
	display: block;
	margin: 0 auto;
	opacity:0;
}

</style>

</head>
<body>

	<!-- <div id="box"></div> -->
	<span id="cen"></span>
	<div id="imgResult"></div>


	<div id="svgGroup">
		<div id="svgs">
            <div id="s0-wp"></div>
            <div id="s1-wp"></div>
            <div id="s2-wp"></div>
            <div id="s3-wp"></div>
            <div id="s4-wp"></div>
            <div id="s5-wp"></div>
            <div id="s6-wp"></div>
            <div id="s7-wp"></div>
            <div id="s8-wp"></div>
            <div id="s9-wp"></div>
            <div id="s10-wp"></div>
            <div id="s11-wp"></div>
            <div id="s12-wp"></div>
            <div id="s13-wp"></div>
            <div id="s14-wp"></div>
            <div id="s15-wp"></div>
            <div id="s16-wp"></div>
            <div id="s17-wp"></div>
            <div id="s18-wp"></div>
        </div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="http://www.jq22.com/demo/vivus-master20160828/dist/vivus.js"></script>

	<script>
		// s2-wp

		var svgIdArr = ["s14", "s0"],curAni, curIndex, $curSvg, $svgGroup = $("#svgGroup");

		var winW = $(window).width();
		var winH = $(window).height();

		var toX = 0, toY = 0;

		var arr = [
		    ["s14", "s0", "s1", "s2", "s3", "s18", "s4", "s6", "s17", "s7", "s5", "s16", "s15", "s13", "s8", "s9", "s10", "s12", "s11"],
		    ["s15", "s13", "s8", "s9", "s10", "s12", "s11", "s14", "s0", "s1", "s2", "s3", "s18", "s4", "s6", "s17", "s7", "s5", "s16"],
		    ["s5", "s7", "s17", "s6", "s4", "s18", "s14", "s0", "s3", "s1", "s2", "s15", "s16", "s13", "s8", "s10", "s12", "s11", "s9"]
		];
		var imgResultArr = ["r1", "r2", "r3"];

		// arr.forEach(function(elem){
		// 	// var theimg = document.createElement('img');
		// 	// var thediv = document.createElement('div');
		// 	// var theimg = document.createElement('img');
		// 	// thediv.id = elem+"-wp";
		// 	// theimg.src = "img"+
		// 	$("#" + elem + "-wp").load("img/" + elem + ".svg", function() {
		//         // svgAni(b)
		//         console.log(elem)
		//     })
		//  // console.log(elem)
		//  // $("<img/>").attr("src","img/"+elem+".svg").appendTo($("#" + elem + "-wp"));

		// })
		$("body").css("opacity", "1")
		aniStart();
		function aniStart() {
		    var a = getRandomizer(0, 2);
		    $(".svg-wp").each(function() {
		        $(this).html("")
		    });
		    svgIdArr = arr[a()];
		    addSvg(0);
		}
		// svgIdArr = arr;
		// addSvg(0);
		function getRandomizer(a, b) {
		    return function() {
		        return Math.floor(Math.random() * (1 + b - a)) + a
		    }
		}


		function addSvg(b) {
			var a = svgIdArr[b];
			// $("#" + elem + "-wp").load("img/" + elem + ".svg", function() {
			$("#" + a + "-wp").load("img/" + a + ".svg", function() {
		        svgAni(b)
		        console.log(a)
		    })
		}


		function svgAni(a) {
		    $curSvg = $("#" + svgIdArr[a]).css("opacity", 1);
		    curIndex = a;
		    curAni = new Vivus(svgIdArr[a], {
		        duration: 20,
		        type: "oneByOne",
		        forceRender: false,
		        onReady: function(b) {
		            followAni($curSvg, 5000, function() {
		                b.play()
		            })
		        }
		    }, function() {
		        if (svgIdArr[a + 1]) {
		            a++;
		            addSvg(a)
		        } else {
		            aniComplete()
		            // console.log("完成");
		            curAni.stop();
		        }
		    })
		}



		// 动画完成
		function aniComplete() {
			$svgGroup.css({
		        "transform": "translate3d(0,0,0)",
		        "transition": "transform 2000ms"
		    });
		    var a = document.createElement("img");
        	var c = getRandomizer(0, 2)();
        	a.onload = function() {

	            $("#svgs").animate({
	                opacity: 0
	            }, 1000);

	            $("#imgResult").append($(a));
	            $("#imgResult").data("name", imgResultArr[c]);
        		var d = $(window).width() / $(a).width();
        		$("#imgResult img").animate({
	                opacity: 1
	            }, 2000, function() {
	            	var e = $(this);
	            	$(this).css({
	                    "-webkit-transform": "scale(" + d + ")",
	                    "transform-origin":"0 0", 
	                    "-webkit-transition": "transform  2000ms"
	                });
	            	// var e = $(this);
	            	console.log("zhongjie")
	            })
        	}
		    
            a.src = "http://game.gtimg.cn/images/up/act/a20170329upm/img/" + imgResultArr[c] + ".jpg"

        }


		// 中心位置调整
		function followAni(f, d, h) {
		    var a = $("#cen").offset().left,
		        j = $("#cen").offset().top,
		        i = f.offset().left + f.width() / 2,
		        g = f.offset().top + f.height() / 2,
		        e = a - i,
		        c = j - g,
		        b = curIndex == 0 ? 0 : d;
		    toX += e;
		    toY += c;
		    $svgGroup.css({
		        "-webkit-transform": "translate3d(" + toX + "px," + toY + "px,0)",
		        "-webkit-transition": "transform " + b + "ms"
		    });
		    if (h && typeof(h) == "function") {
		        h()
		    }
		};
		
	</script>
</body>
</html>


